<!--
  * 商品明细
  *
-->
<template>
  <a-table :dataSource="tableData" :columns="columns" :pagination="false" rowKey="id" size="small" bordered :scroll="{ x: 'max-content', y: 427 }">
    <template #bodyCell="{ text, record, column }">
      <template v-if="column.dataIndex === 'unit_type'">
        <div class="smart-table-operate">
          <a-tag :color="getTagColor(record.unit_type)" v-if="record.unit_type">
            {{ getDescByValue('GOODS_UNIT_TYPE', record.unit_type) }}
          </a-tag>
          <a-tag color="processing" v-if="props.defaultType === record.unit_type">默认单位</a-tag>
        </div>
      </template>
      <template v-if="column.dataIndex === 'spec_img'">
        <div class="smart-table-operate">
          <a-image :width="30" :height="30" :src="text || failImg" />
        </div>
      </template>
      <template v-if="column.dataIndex === 'length'">
        <div class="smart-table-operate">{{ record.length }}*{{ record.width }}*{{ record.height }}</div>
      </template>
      <template v-if="column.dataIndex === 'action'">
        <div class="smart-table-operate">
          <a-button @click="deleteSpec(record.id, record.spec_name)" :disabled="record.unit_type === 1" danger type="link" v-privilege="'goods:del:spec'">删除</a-button>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import { Modal, message } from 'ant-design-vue'
import failImg from '@/assets/images/notice/failImg.png'
import { goodsApi } from '@/api/business/shopping-mall/product-api'
import { useEnums } from '@/hooks/plugins/useEnums'
const { getDescByValue } = useEnums()
const props = defineProps({
  spec: {
    type: Array,
    default: () => []
  },
  defaultType: {
    type: Number,
    default: 1
  }
})

const columns = reactive([
  {
    title: '单位类型',
    dataIndex: 'unit_type'
  },
  {
    title: '图片',
    dataIndex: 'spec_img'
  },
  {
    title: '商品条码',
    dataIndex: 'barcode'
  },
  {
    title: '规格',
    dataIndex: 'spec_name'
  },
  {
    title: '单位',
    dataIndex: 'unit_name'
  },
  {
    title: '箱规比',
    dataIndex: 'conversion_rate'
  },
  {
    title: '售价',
    dataIndex: 'sale_price'
  },
  {
    title: '起购量',
    dataIndex: 'min_quantity'
  },
  {
    title: '体积/m³',
    dataIndex: 'volume'
  },
  {
    title: '重量/kg',
    dataIndex: 'weight'
  },
  {
    title: '配送费',
    dataIndex: 'driver_money'
  },
  {
    title: '协送费',
    dataIndex: 'assist_driver_money'
  },
  {
    title: '操作',
    dataIndex: 'action'
  }
])
const tableData = ref([])

const getTagColor = (unitType: number) => {
  switch (unitType) {
    case 1:
      return 'default'
    case 2:
      return 'warning'
    case 3:
      return 'success'
    default:
      return null
  }
}
watch(
  () => props.spec,
  (e) => {
    if (e) {
      tableData.value = e
    }
  },
  { immediate: true }
)

// 删除规格
function deleteSpec(id: number, name: string) {
  Modal.confirm({
    title: '删除规格',
    content: `确定要删除 ${name} 的规格吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      try {
        const res = await goodsApi.deleteSpec({ id })
        message.success(res.msg)
        tableData.value = tableData.value.filter((item) => item.id !== id)
      } catch (error) {
        message.error(error.msg)
      }
    }
  })
}
</script>
